<template>
  <div class="side">
    <div class="register">
      <el-row>
        <el-button @click="createData()" class="dakai" style="float:right;" type="primary">提交</el-button>
      </el-row>
    </div>
    <div style="width:100%;">
      <el-form :model="RefundMentSet" label-position="right" label-width="181px" ref="dataForm">
        <el-form-item label="退款期限">
          <el-input style="width:450px" v-model="RefundMentSet.deadLine"/>
          <p style="margin:0;color:#606266">用户在退款期限的天数内，可以申请退款。退款期限为０，则不能申请退款。</p>
          <p style="margin-top:-10px;color:red;">系统不支持自动退款，请联系学员获得相关账户，手动处理退款相关事宜。</p>
        </el-form-item>
        <el-form-item label="退款申请通知">
          <el-input :rows="4" style="width:450px" type="textarea" v-model="RefundMentSet.applicationNotification"/>
          <p style="margin:0;color:#606266">退款申请提交时，发送给用户的站内通知。</p>
        </el-form-item>
        <el-form-item label="退款审核通过通知">
          <el-input :rows="4" style="width:450px" type="textarea" v-model="RefundMentSet.auditPassNotification"/>
          <p style="margin:0;color:#606266">管理员审核退款通过时，发送给用户的站内通知。</p>
        </el-form-item>
        <el-form-item label="退款审核未通过通知">
          <el-input :rows="4" style="width:450px" type="textarea" v-model="RefundMentSet.auditNotPassNotification"/>
          <p style="margin:0;color:#606266">管理员审核退款未通过时，发送给用户的站内通知。</p>
        </el-form-item>
      </el-form>
    </div>
    <div class="foot">
      <ul class="ul">
        <li style="font-weight:bold;" class="li">通知变量说明：</li>
        <li style="text-indent:60px;" class="li">{{ item }}:需退款的课程或班级</li>
        <li style="text-indent:60px;" class="li">{{ amount }}:退款金额</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {addRefundMentSet, getRefundMentSet} from '@/api/system/refund_ment_set';
  import {getTenantId, getUserName} from '@/utils/auth';

  export default {
    data() {
      return {
        item: '{{ item }}',
        amount: '{{ amount }}',
        RefundMentSet: {
          deadLine: '10',
          tenantId: '',
          creator: '',
          applicationNotification: '您好，您退款的{{item}}，管理员已收到您的退款申请，请耐心等待退款审核结果。',
          auditPassNotification: '您好，您申请退款的{{item}} 审核通过，将为您退款{{amount}}元。',
          auditNotPassNotification: '您好，您申请退款的{{item}} 审核未通过，请与管理员再协商解决纠纷。'
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getRefundMentSet(getTenantId()).then(response => {
          this.RefundMentSet = response.data
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.RefundMentSet.tenantId = getTenantId();
            this.RefundMentSet.creator = getUserName;
            addRefundMentSet(this.RefundMentSet).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      }
    }
  }
</script>

<style>

  .register {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
    margin-bottom: 10px;
  }

  .dakai {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }

  .foot {
    margin-top: 20px;
    padding: 15px 15px;
    border-radius: 5px;
    background-color: #d9edf7;
    color: #326f8f;
    border-left: 5px solid #50bfff;
  }

  .ul {
    text-decoration: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .li {
    margin-top: 5px;
  }


</style>
